<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>KISSY Table Demo</title>
<link rel="stylesheet" href="../../assets/dpl/base.css">
<link rel="stylesheet" href="../../assets/dpl/badges.css">
<link rel="stylesheet" href="../../assets/dpl/tables.css">
<link rel="stylesheet" href="./assets/docs.css">
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>Badges <small>数字指示</small></h1>
    </div>
    <div class="row">
        <div class="span8">
            <h3>简介</h3>
            <p>数字指示用于未读消息数目等场景</p>
        </div><!-- /.span -->
        <div class="span16">
            <h3>全部类名</h3>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Example</th>
                    <th>Markup</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        Default
                    </td>
                    <td>
                        <span class="badge">1</span>
                    </td>
                    <td>
                        <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        Success
                    </td>
                    <td>
                        <span class="badge badge-success">2</span>
                    </td>
                    <td>
                        <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        Warning
                    </td>
                    <td>
                        <span class="badge badge-warning">4</span>
                    </td>
                    <td>
                        <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        Important
                    </td>
                    <td>
                        <span class="badge badge-important">6</span>
                    </td>
                    <td>
                        <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        Info
                    </td>
                    <td>
                        <span class="badge badge-info">8</span>
                    </td>
                    <td>
                        <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                    </td>
                </tr>
                <tr>
                    <td>
                        Inverse
                    </td>
                    <td>
                        <span class="badge badge-inverse">10</span>
                    </td>
                    <td>
                        <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                    </td>
                </tr>
                </tbody>
            </table>
        </div><!-- /.span -->
    </div><!-- /.row -->
</div>
</body>
</html>